<template>
  <div class="rightOne">
    <div>
      <moduleTitle :name="title"> </moduleTitle>
    </div>
    <div class="two">
      <div class="radar-title">
        <img
          src="@/assets/newDashboard/数据服务bg.png"
          class="radar-img"
          alt=""
        />
        <div class="radar-box">
          <div class="compont">
            <div class="c-box">
              <div class="allnum">服务总数</div>
            </div>
          </div>
          <div class="dashed"></div>
          <div class="compont">
            <div class="c-box">
              <div class="num">
                {{ serve.apiCount * 1 + serve.unUseCount * 1 + 1 }}
              </div>
              <div class="type">个</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-one-foot">
        <div class="right-one-foot-li">
          <img src="@/assets/newDashboard/数据服务框.png" alt="" />
          <div class="r-f-li-box">
            <div class="r-f-li-box-top">服务订阅人次</div>
            <div class="r-f-li-box-foot">
              <div class="num">{{ serve.userCount }}</div>
              <div class="type">人次</div>
            </div>
          </div>
        </div>
        <div class="right-one-foot-li">
          <img src="@/assets/newDashboard/数据服务框.png" alt="" />
          <div class="r-f-li-box">
            <div class="r-f-li-box-top">服务调用总次数</div>
            <div class="r-f-li-box-foot">
              <div class="num">{{ serve.callCount }}</div>
              <div class="type">次</div>
            </div>
          </div>
        </div>
        <div class="right-one-foot-li">
          <img src="@/assets/newDashboard/数据服务框.png" alt="" />
          <div class="r-f-li-box">
            <div class="r-f-li-box-top">今日访问总数</div>
            <div class="r-f-li-box-foot">
              <div class="num">{{ serve.dayCount }}</div>
              <div class="type">次</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moduleTitle from '@/components/moduleTitle'

export default {
  name: 'SdssJddsZhgjWebRightOne',
  components: {
    moduleTitle
  },
  props: {
    propsone: Object
  },
  data() {
    return {
      title: '数据服务',
      serve: {}
    }
  },
  watch: {
    propsone: {
      immediate: true,
      deep: true,
      handler: function (newarr, olbarr) {
        if (newarr) {
          this.serve = newarr
        }
      }
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.rightOne {
  width: 100%;
  height: 30%;
  // background-color: yellow;
  margin-top: 3.5vh;
  margin-bottom: -0.8vh;
}
.two {
  box-sizing: border-box;
}
.radar-title {
  width: 22.1563vw;
  height: 4.6296vh;
  margin: 1vh auto;
  position: relative;
}
.radar-img {
  height: 100%;
  width: 100%;
}
.radar-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.compont {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-box {
  display: flex;
  align-items: center;
}

.num {
  font-size: 1.0417vw;
  font-family: DINPro;
  font-weight: 500;
  color: #3bf5ff;
}
.allnum {
  font-size: 0.8333vw;
  font-weight: 600;
}
.type {
  font-size: 0.7292vw;
  color: #ffffff;
  font-family: SourceHanSansCN-Regular;
  margin-left: 0.4167vw;
}

.right-one-foot {
  margin: 2vh auto 0;
  width: 90%;
  display: flex;
  justify-content: space-between;
}

.right-one-foot-li {
  position: relative;
}

.right-one-foot-li img {
  width: 6.8vw;
  height: 6.4815vh;
}

.r-f-li-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.r-f-li-box-top {
  // width: 100%;
  height: 1.2854vw;
  line-height: 1.2854vw;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.9375vw;
  color: #fff;
  font-weight: 600;
  transform: scale(0.8);
  flex-wrap: nowrap;
}

.r-f-li-box-foot {
  margin-top: 1.1111vh;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.dashed {
  position: absolute;
  left: 36%;
  top: 50%;
  width: 28%;
  height: 0.1852vh;
  border-top: 0.1042vw dashed #ffffff;
}
</style>
